<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="business_detail" v-loading="loading">
    <div class="top">
      <div class="pic">{{ formData?.sceneName?.slice(0, 1) }}</div>
      <div class="name">{{ formData?.sceneName }}</div>
      <el-tooltip content="返回"><img :src="back" alt="" @click="goBack" /></el-tooltip>
    </div>
    <div class="map-info">
      <el-card shadow="never" class="treeDiv top-form">
        <div class="treeStyle">
          <el-form :inline="true" size="small" label-width="100px">
            <el-form-item label="业务场景名称：" prop="sceneId">
              <span>{{ formData?.sceneName }}</span>
            </el-form-item>
            <el-form-item label="业务系统名称：" prop="systemId">
              <span>{{ formData?.systemName }}</span>
            </el-form-item>
            <el-form-item label="模型总量：">
              <span>{{ formData?.modelCount }}</span>
            </el-form-item>
            <el-form-item label="要素库类型：">
              <span>{{ databaseTypeName }}</span>
            </el-form-item>
            <el-form-item label="描述：">
              <span>{{ formData.description }}</span>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="map">
      <div :class="['card_item', cards.length > 7 ? 'item8' : 'item7']" v-for="(item, index) in cards" :key="item">
        <div :class="['card-item__wrapper', 'bg-'+index]">
          <div class="title">
            <div :class="'index-'+index">{{ index + 1 }}</div>
            <el-tooltip :content="item.stepDescription" placement="top">
              <div class="step-name">{{ item.stepDescription }}</div>
            </el-tooltip>
          </div>
          <div class="content" :id="item.id">
            <h3 class="model-count">模型数量: {{ item?.modelRefList.length }}</h3>
            <div :class="['database_item', 'border-'+index]" v-for="(el, cIndex) in item.modelRefList" :id="cIndex + 'el'" :key="el">
              <div class="base_top">
                <div>{{ el.modelName }}</div>
                <div>
                  数据量：<el-link @click="viewDataDetail(el)">{{ el.importCount }}</el-link>
                </div>
              </div>
              <div class="split"></div>
              <div class="bottom">
                <div>
                  <span>数据来源：</span><span>{{ el.importMethods.join(',') }}</span>
                </div>
                <div>
                  <span>服务调用次数：</span><span>{{ el.serviceCalledCount }}</span>
                </div>
                <div class="btn-wrapper">
                  <el-link size="small" type="primary" @click="linkToSearch(el)">统一检索</el-link>  
                  <el-link size="small" disabled type="primary" @click="linkToSearch">统计分析</el-link>  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <DataDetail v-if="dataDetailVisible" :dataDetailVisible="dataDetailVisible" :data="booldParams" @handleEvent="handleEvent" /> -->
  </div>
</template>
<script name="MapDetail" setup>
import back from '@/assets/images/back.svg';
// import DataDetail from './DataDetail.vue';
import { getBusinessMapDetail } from '@/api/businessMap/index';
const props = defineProps(['rowData']);
const emit = defineEmits(['goback']);
const businessData = ref(null);
const loading = ref(false);
const cards = ref([]);
const formData = ref({});
const databaseTypeName = ref('');
const dataDetailVisible = ref(false);
const booldParams = ref({businessId:props?.data?.id,databaseId:''});
//返回
const goBack = () => {
  // emit('goback');
  emit('handleEvent', { component: 'List', row: null });
};
const handleEvent = () => {
  dataDetailVisible.value = false;
};
const viewDataDetail = (data) => {
  // booldParams.value.databaseId = data?.id;
  // dataDetailVisible.value = true;
  emit('handleEvent', { component: 'DataInfo', modelId: data.modelId, sourceId: data.id, row: props.rowData, versionList: data?.modelList, modelName: data.modelName });
};
const linkToSearch = (row) => {
  emit('handleEvent', { component: 'SearchDataList', row: props.rowData, params: {
    'modelName': formData.value.modelName,
    'systemName': formData.value.systemName,
    'sceneName': formData.value.sceneName,
    'modelName': row.modelName,
  } });
}

const getDetail = () => {
  loading.value = true;
  getBusinessMapDetail({ id: props?.rowData?.id, needStatistics: true }).then((res) => {
    if (res) {
      formData.value = res?.data;
      databaseTypeName.value = res?.data?.isfdDatabaseTypeManagementTree.map(item => item.databaseName).join("、");
      cards.value = res?.data?.isfdSceneMapStepList || [];
      loading.value = false;
    }
  }).finally(() => {
    loading.value = false;
  })
}
onMounted(() => {
  getDetail();
  
});
</script>
  <style lang="scss" scoped>
.business_detail {
  width: 100%;
  height: calc(100vh - 84px);
  font-size: 12px;
  // padding: 10px 20px;
  .top {
    display: flex;
    align-items: center;
    background: rgba(65,143,247,.4);
    padding: 10px 0 0 20px;
    .pic {
      display: none;
      height: 40px;
      width: 40px;
      background: #409eff;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      color: #004ea2;
    }
    .name {
      background: #fff;
      color: #004ea2;
      padding: 10px 20px;
      /* border-radius: 5px; */
      font-weight: 700;
      font-size: 16px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    > img {
      height: 20px;
      width: 20px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .map-info {
    
  }
  .map {
    width: 100%;
    height: calc(100% - 150px);
    // border: 1px solid #d9d9d9;
    margin-top: 10px;
    display: flex;
    overflow-x: auto;
    border-radius: 8px;
    padding: 0 10px;
    .card_item {
      height: 100%;
      // min-width: 170px;
      // margin-right: 10px;
      // border: 1px solid #d9d9d9;
      // background: #fcf8e9;
      // border-radius: 8px;
      // position: relative;
      &.item7 {
        min-width: 14.28%;
      }
      &.item8 {
        min-width: 12.5%;
      }
      &:last-child {
        .card-item__wrapper {
          margin-right: 0;
        }
      }
      .card-item__wrapper {
        height: 100%;
        margin-right: 10px;
        // border: 1px solid #a28f8f;
        // background: #fcf8e9;
        border-radius: 8px;
        position: relative;
        &.bg-0 {
          border: 1px solid #cdae2c;
          background: #fcf8e9;
        }
        &.bg-1 {
          border: 1px solid #e6854e;
          background: #faefe9;
        }
        &.bg-2 {
          border: 1px solid #ef80a2;
          background: #fcf1f4;
        }
        &.bg-3 {
          border: 1px solid #d851c7;
          background: #f7eef6;
        }
        &.bg-4 {
          border: 1px solid #5038c7;
          background: #f3f0ff;
        }
        &.bg-5 {
          border: 1px solid #1c647f;
          background: #eaf3f6;
        }
        &.bg-6 {
          border: 1px solid #1ca66a;
          background: #ecf7f2;
        }
        &.bg-7 {
          border: 1px solid #8eb93d;
          background: #f3f7eb;
        }
        &.bg-8 {
          border: 1px solid #cdae2c;
          background: #fcf8e9;
        }
      }
      .title {
        width: 100%;
        height: 40px;
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: center;
        .step-name {
          font-size: 14px;
          font-weight: 600;
          color: #2e2e2e;
        }
        .index-0 {
          border: 1px solid #cdae2c;
          background: #fff;
          color: "#e4d8bb";
        }
        .index-1 {
          border: 1px solid #e6854e;
          background: #fff;
          color: "#e2e8d9";
        }
        .index-2 {
          border: 1px solid #ef80a2;
          background: #fff;
          color: "#dbd0c5";
        }
        .index-3 {
          border: 1px solid #d851c7;
          background: #fff;
          color: "#ebe2e2";
        }
        .index-4 {
          border: 1px solid #5038c7;
          background: #fff;
          color: "#dbe0ef";
        }
        .index-5 {
          border: 1px solid #1c647f;
          background: #fff;
          color: "#d4d9dc";
        }
        .index-6 {
          border: 1px solid #1ca66a;
          background: #fff;
          color: "#d6dfdd";
        }
        .index-7 {
          border: 1px solid #8eb93d;
          background: #fff;
          color: "#e8ecd5";
        }
        .index-8 {
          border: 1px solid #cdae2c;
          background: #fff;
          color: "#e4d8bb";
        }
        > div:nth-child(1) {
          height: 20px;
          width: 20px;
          // border: 1px solid #d9d9d9;
          border-radius: 4px;
          text-align: center;
          line-height: 20px;
          font-weight: 600;
        }
        > div:nth-child(2) {
          margin-left: 4px;
          // max-width: 50px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        > div:nth-child(3) {
          margin-left: 4px;
          height: 20px;
          width: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
      .content {
        height: calc(100% - 50px);
        background: #fff;
        margin: 0 10px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        font-size: 12px;
        .btn-wrapper {
          display: flex;
          justify-content: space-between;
        }
        .model-count {
          padding: 5px 0;
          margin: 0;
          font-size: 14px;
          text-align: left;
        }
        .database_item {
          height: 120px;
          width: calc(100% - 16px);
          // border: 1px solid #7e7272;
          margin: 8px;
          border-radius: 4px;
          position: relative;
          &.border-0 {
            border: 1px solid #cdae2c;
          }
          &.border-1 {
            border: 1px solid #e6854e;
          }
          &.border-2 {
            border: 1px solid #ef80a2;
          }
          &.border-3 {
            border: 1px solid #d851c7;
          }
          &.border-4 {
            border: 1px solid #5038c7;
          }
          &.border-5 {
            border: 1px solid #1c647f;
          }
          &.border-6 {
            border: 1px solid #1ca66a;
          }
          &.border-7 {
            border: 1px solid #8eb93d;
          }
          &.border-8 {
            border: 1px solid #cdae2c;
          }
          .base_top {
            font-size: 12px;
            padding: 5px;
            > div:nth-child(2) {
              margin-top: 5px;
            }
          }
          .split {
            width: 100%;
            height: 1px;
            background: #d9d9d9;
          }
          .bottom {
            padding: 5px;
            > div:nth-child(2) {
              margin-top: 5px;
            }
            > div:nth-child(3) {
              margin-top: 5px;
            }
            > div {
              > span:nth-child(2) {
                color: #909399;
              }
            }
          }
        }
      }
    }
  }
  :deep(.el-link__inner) {
    font-size: 12px;
    color: #409eff;
  }
}
</style>
  